<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router';
import * as admin from '@/api/indexdata.js';
import JinquData from './jinquData.vue';
import {ElMessage} from 'element-plus'
const route = useRoute();  // 获取当前路由
import { useRouter } from 'vue-router';
const router = useRouter();
import {useTokenStore} from '@/stores/token.js'
import useUserInfoStore from '@/stores/userInfo.js'
const tokenStore = useTokenStore();
const userInfoStore = useUserInfoStore();
const get_login = () => {
  const user_data = userInfoStore.info
  const user_token = tokenStore.token
  console.log(user_data.status);
  console.log(user_token);
  if(!user_token || user_data.status != '2'){
    // console.log('未登录');
    router.push('/login')
  }
};
get_login();



const JiudianId = route.query;  // 获取路径参数
// const userInfoStore = useUserInfoStore()

const imgList = ref([])
const jinquData = ref({})
const pinlunList = ref([])
const total = ref(0);
// 时间选择器
const yuyue_date = ref('')

const endTime = ref('')

const room = ref('')

const centerDialogVisible = ref(false)

const getJiudainData = async () => {
    const param = {
        id: JiudianId.JiudianId
    }
    console.log(param)
    const res = await admin.articleJiudianListService(param)
    jinquData.value = res.data[0]
}

const getImgList = async () => {
    const param = {
        jiudianId:  JiudianId.JiudianId,
    }
    const res = await admin.articleImageListService(param);
    imgList.value = res.data
}

const getPinlunList = async () => {
    const param = {
        jiudianId: JiudianId.JiudianId
    }
    const res = await admin.articlePinlunListService(param);
    pinlunList.value = res.data
    total.value = res.total
}

const formatDate = (date) => {
    const d = new Date(date);
    return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
};

const currentPage = ref(1);
const pageSize = ref(10);
const handlePageChange = (page) => {
  currentPage.value = page;
  updatePaginatedComments();
};


const yuyue = async () => {
  console.log(userInfoStore.info)
    const param = {
        jiudianId: JiudianId.JiudianId,
        yyTime: yuyue_date.value.toISOString(),
        endTime: endTime.value.toISOString(),
        room: room.value,
        userId:userInfoStore.info.id,
    }
    const res = await admin.addYuyueService(param);
    if (res.code === 0) {
      ElMessage.success(res.msg? res.msg:'预约成功');
    }
    centerDialogVisible.value = false
}


onMounted(() => {
    getImgList();
    getJiudainData();
    getPinlunList();
})

</script>

<template>
  <el-main>
    <el-row :gutter="20" justify="center">
      <el-col :span="16">
        <!-- 图片轮播 -->
        <el-carousel :interval="4000" type="card" height="300px">
          <el-carousel-item v-for="(item, index) in imgList" :key="index">
            <img :src="item.img" alt="carousel image" class="carousel-image" />
          </el-carousel-item>
        </el-carousel>

        <!-- 景区详情 -->
        <div class="jinqu-info">
            <h2>{{ jinquData.name }}</h2>
            <p>{{ jinquData.description }}</p>
            <p><strong>地址：</strong>{{ jinquData.address }}</p>
            <p><strong>类型：</strong><el-tag class="ml-2" type="warning">{{ jinquData.type }}</el-tag></p>
            <p><strong>联系电话：</strong>{{ jinquData.phone }}</p>
            <p><strong>价格：</strong>{{ jinquData.price }}</p>
            <p><strong>评分：</strong><el-rate v-model="jinquData.rating" clearable /></p>
            <p><strong>创建时间：</strong>{{ formatDate(jinquData.createTime) }}</p>

          <!-- 预约门票按钮 -->
          <el-button type="primary" @click="centerDialogVisible = true" class="reserve-btn">预约酒店</el-button>
        </div>

        <div class="comments-section">
            <h3>评论列表</h3>
            <el-divider></el-divider>

            <div v-for="(comment, index) in pinlunList" :key="index" class="comment-item">
                <el-rate v-model="comment.fenshu" disabled></el-rate>
                <div class="comment-author">{{ comment.nickName }}aaa</div>
                <div class="comment-content">{{ comment.content }}</div>
                <div class="comment-time">{{ formatDate(comment.createTime) }}</div>
                <el-divider></el-divider>
            </div>
            <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            @current-change="handlePageChange"
            layout="prev, pager, next, jumper"
            />
        </div>
      </el-col>
    </el-row>
    <el-dialog
  v-model="centerDialogVisible"
  title="预约"
  width="30%"
  align-center>
  
  <span>
    <div class="block">
      <span class="demonstration">入住日期</span>
      <el-date-picker
        v-model="yuyue_date"
        type="date"
        placeholder="请选择入住日期"
      />
    </div>

    <div class="block" style="margin-top: 10px;">
      <span class="demonstration">离开日期</span>
      <el-date-picker
        v-model="endTime"
        type="date"
        placeholder="请选择离开日期"
      />
    </div>

    <div class="block" style="margin-top: 10px;">
      <span class="demonstration">客房类型</span>
      <el-select
        v-model="room"
        placeholder="请选择客房类型"
        style="width: 100%;">
        <el-option label="单人间" value="单人间" />
        <el-option label="双人间" value="双人间" />
        <el-option label="豪华套房" value="豪华套房" />
      </el-select>
    </div>
  </span>

  <template #footer>
    <span class="dialog-footer">
      <el-button @click="centerDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="yuyue()">
        确认预约
      </el-button>
    </span>
  </template>
</el-dialog>

  </el-main>
</template>

<style scoped>
/* 背景色及内边距 */
.el-main {
    height: auto;
  background-color: #f4f7fc;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 图片轮播 */
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* 景区详情 */
.jinqu-info {
  background-color: #ffffff;
  padding: 20px;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.jinqu-info h2 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.jinqu-info h3 {
  font-size: 18px;
  color: #666;
  margin-top: 10px;
}

.jinqu-info p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  margin-top: 10px;
}

.reserve-btn {
  margin-top: 20px;
  background-color: #409eff;
  border-color: #409eff;
  color: white;
  font-weight: bold;
  width: 100%;
}

.reserve-btn:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

/* 评论区 */
/* 评论区样式 */
.comments-section {
  background-color: #ffffff;
  padding: 20px;
  margin-top: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.comments-section h3 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.comment-item {
  padding: 10px;
  background-color: #f9f9f9;
  margin-bottom: 15px;
  border-radius: 8px;
}

.comment-author {
  font-weight: bold;
  color: #409eff;
}

.comment-content {
  margin-top: 10px;
  font-size: 16px;
  color: #555;
}

.comment-time {
  margin-top: 5px;
  font-size: 14px;
  color: #999;
}

.comments-section h3 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.el-divider {
  margin: 15px 0;
}



/* 响应式设计 */
@media (max-width: 768px) {
  .el-main {
    padding: 10px;
  }

  .jinqu-info h2 {
    font-size: 20px;
  }

  .jinqu-info h3 {
    font-size: 16px;
  }

  .jinqu-info p {
    font-size: 14px;
  }

  .reserve-btn {
    width: 100%;
  }
}
</style>
